<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div class="content-section" th:fragment="content">
    <h2><i class="fas fa-procedures"></i> 我的病人</h2>
    <div class="search-bar">
        <input type="text" placeholder="输入病人姓名搜索...">
        <button class="search-btn"><i class="fas fa-search"></i> 搜索</button>
    </div>
    <table class="patients-table">
        <thead>
            <tr>
                <th>病历号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>联系电话</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

<script th:inline="javascript">
$(document).ready(function() {
    // 页面加载时获取所有病人
    loadPatients();
    
    // 搜索按钮点击事件
    $('.search-btn').click(function() {
        loadPatients();
    });
    
    // 搜索框回车事件
    $('.search-bar input').keypress(function(e) {
        if(e.which == 13) {
            loadPatients();
        }
    });
});

function loadPatients() {
    var searchName = $('.search-bar input').val();
    
    $.get(/*[[@{/doctor/my-patients/list}]]*/ '', { searchName: searchName })
        .done(function(response) {
            console.log('Response:', response); // 添加调试日志
            
        var tbody = $('.patients-table tbody');
        tbody.empty();
            
            // 检查response的格式
            var patients = [];
            if (response && response.data) {
                patients = response.data;
            }
            
            console.log('Patients array:', patients); // 添加调试日志
            
            if (!Array.isArray(patients) || patients.length === 0) {
                tbody.append('<tr><td colspan="6" class="text-center">暂无病人数据</td></tr>');
                return;
            }
        
        patients.forEach(function(patient) {
                console.log('Processing patient:', patient); // 添加调试日志
                
            var row = $('<tr>');
                row.append($('<td>').text(patient.patientId || ''));
                row.append($('<td>').text(patient.patientName || ''));
                row.append($('<td>').text(patient.patientGender || ''));
                row.append($('<td>').text(patient.patientAge || ''));
            row.append($('<td>').text(patient.patientPhone || '-'));

            // 添加查看链接
            var viewLink = $('<a>', {
                href: 'javascript:void(0)',
                text: '查看',
                class: 'view-link',
                click: function() {
                    viewPatientDetail(patient.patientId);
                }
            });
            row.append($('<td>').append(viewLink));

            tbody.append(row);
        });
            
            // 隐藏错误信息
            $('.alert-error').hide();
        })
        .fail(function(jqXHR, textStatus, errorThrown) {
            console.error('Error:', textStatus, errorThrown); // 添加错误日志
            
            var errorMessage = jqXHR.responseText || '加载病人列表失败';
            $('.alert-error').text(errorMessage).show();
            
            var tbody = $('.patients-table tbody');
            tbody.empty();
            tbody.append('<tr><td colspan="6" class="text-center text-danger">加载失败，请重试</td></tr>');
    });
}

function viewPatientDetail(patientId) {
    var url = /*[[@{/doctor/my-patients/detail}]]*/ '';
    $.get(url + '/' + patientId)
        .done(function(response) {
            if (response.code === 200 && response.data) {
                var detail = response.data;
        var modalContent = '<div class="modal-content">' +
            '<h3>病人详细信息</h3>' +
            '<div class="detail-info">' +
                    '<p><strong>病历号：</strong>' + (detail.patientId || '-') + '</p>' +
                    '<p><strong>病人姓名：</strong>' + (detail.patientName || '-') + '</p>' +
                    '<p><strong>性别：</strong>' + (detail.patientGender || '-') + '</p>' +
                    '<p><strong>年龄：</strong>' + (detail.patientAge || '-') + '</p>' +
            '<p><strong>联系电话：</strong>' + (detail.patientPhone || '-') + '</p>' +
                    '<p><strong>身份证号：</strong>' + (detail.patientIdCard || '-') + '</p>' +
                    '<p><strong>住院信息：</strong>' + 
                        (detail.wardInfo ? (detail.wardInfo.floorNum + '楼 ' + 
                        detail.wardInfo.wardNum + '号房 ' + 
                        detail.wardInfo.bedNum + '号床') : '暂无床位信息') + '</p>' +
            '<p><strong>病情描述：</strong>' + (detail.conditionDesc || '暂无描述') + '</p>' +
                    '<p><strong>入院时间：</strong>' + (detail.beginTime || '暂无记录') + '</p>' +
            '</div></div>';

        showModal(modalContent);
            } else {
                showModal('<div class="modal-content"><div class="alert alert-error">获取病人详情失败</div></div>');
            }
        })
        .fail(function(jqXHR) {
            var errorMessage = jqXHR.responseJSON?.message || '获取病人详情失败';
            showModal('<div class="modal-content"><div class="alert alert-error">' + errorMessage + '</div></div>');
    });
}

function showModal(content) {
    // 如果已存在模态框，先移除
    $('.modal-overlay').remove();

    // 创建模态框
    var modalHtml = '<div class="modal-overlay">' +
        '<div class="modal-wrapper">' +
        content +
        '<button class="modal-close" onclick="closeModal()">关闭</button>' +
        '</div></div>';

    $('body').append(modalHtml);
}

function closeModal() {
    $('.modal-overlay').remove();
}
</script>

<style>
/* 表格样式优化 */
.patients-table {
    margin-top: 20px;
    width: 100%;
    border-collapse: collapse;
}

.patients-table th,
.patients-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
}

.patients-table th {
    background-color: #f5f5f5;
    font-weight: 600;
}

.patients-table tr:hover {
    background-color: #f8f9fa;
}

/* 搜索栏样式优化 */
.search-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.search-bar input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.search-bar input:focus {
    outline: none;
    border-color: #4CAF50;
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}

.search-btn {
    padding: 8px 16px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}

.search-btn:hover {
    background-color: #45a049;
}
</style>
</body>
</html> 